<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Dropdown 下拉 - Easy Frame</title>
    <meta name="description" content="Updates and statistics">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!--str:::全局css -->
    <link href="/assets/plugins/global/plugins.bundle.css" rel="stylesheet" type="text/css"/>
    <link href="/assets/css/demo1/style.bundle.css" rel="stylesheet" type="text/css"/>
    <!--end::全局css -->

    <link rel="shortcut icon" href="/assets/media/logos/favicon.ico"/>
</head>
<body class="e-page--loading">
<div class="e-content">
    <div class="row">
        <div class="col">
            <div class="alert alert-light alert-elevate fade show" role="alert">
                <div class="alert-icon"><i class="flaticon-warning e-font-brand"></i></div>
                <div class="alert-text">
                    基于<code>Bootstrap Dropdown</code>，可前往
                    <a class="e-link e-font-bold" href="https://getbootstrap.com/docs/4.3/components/dropdowns/" target="_blank">查看详细API</a>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-6">
            <!--begin::Card-->
            <div class="card">
                <div class="card-head">
                    <div class="card-head-label">
                    <span class="card-head-icon e-hidden">
                        <i class="la la-gear"></i>
                    </span>
                        <h3 class="card-head-title">
                            基础
                        </h3>
                    </div>
                </div>
                <div class="card-body">

                    <!--begin::Section-->
                    <div class="e-section">
                        <span class="e-section-info">提示：Dropdown选项中也可以使用Tooltip</span>
                        <div class="e-section-content">
                            <div class="row">
                                <div class="col">
                                    <div class="dropdown">
                                        <button class="btn btn-brand dropdown-toggle" type="button"
                                                id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true"
                                                aria-expanded="false">
                                            下拉按钮
                                        </button>
                                        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                                            <a class="dropdown-item" href="#" data-toggle="e-tooltip"
                                               title="这是一个深色Tooltip"
                                               data-placement="right" data-skin="dark" data-container="body">深色Tooltip</a>
                                            <a class="dropdown-item" href="#">选项一</a>
                                            <a class="dropdown-item" href="#" data-toggle="e-tooltip"
                                               title="这是一个浅色Tooltip"
                                               data-placement="left">浅色Tooltip</a>
                                        </div>
                                    </div>
                                </div>
                                <div class="col">
                                    <div class="dropdown">
                                        <button class="btn btn-success dropdown-toggle" type="button"
                                                id="dropdownMenuButton"
                                                data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                            下拉按钮
                                        </button>
                                        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                                            <a class="dropdown-item" href="#">选项一</a>
                                            <a class="dropdown-item" href="#">选项二</a>
                                            <a class="dropdown-item" href="#">选项三</a>
                                        </div>
                                    </div>
                                </div>
                                <div class="col">
                                    <div class="dropdown">
                                        <button class="btn btn-danger dropdown-toggle" type="button"
                                                id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true"
                                                aria-expanded="false">
                                            下拉按钮
                                        </button>
                                        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                                            <a class="dropdown-item" href="#">选项一</a>
                                            <a class="dropdown-item" href="#">选项二</a>
                                            <a class="dropdown-item" href="#">选项三</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!--end::Section-->
                    <div class="e-separator e-separator--space-lg e-separator--border-dashed"></div>

                    <!--begin::Section-->
                    <div class="e-section">
                        <span class="e-section-info">带图标的下拉</span>
                        <div class="e-section-content">
                            <div class="row">
                                <div class="col">
                                    <div class="dropdown">
                                        <button class="btn btn-success dropdown-toggle" type="button"
                                                id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true"
                                                aria-expanded="false">
                                            使用 Lineawesome 图标
                                        </button>
                                        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                                            <a class="dropdown-item" href="#"><i class="la la-qq"></i> QQ</a>
                                            <a class="dropdown-item" href="#"><i class="la la-weibo"></i> 微博</a>
                                            <a class="dropdown-item" href="#"><i class="la la-wechat"></i> 微信</a>
                                        </div>
                                    </div>
                                </div>
                                <div class="col">
                                    <div class="dropdown">
                                        <button class="btn btn-brand dropdown-toggle" type="button"
                                                id="dropdownMenuButton"
                                                data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                            使用 Fontawesome 图标
                                        </button>
                                        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                                            <a class="dropdown-item" href="#"><i class="fa fa-file-audio"></i> 音频</a>
                                            <a class="dropdown-item" href="#"><i class="fa fa-file-video"></i> 视频</a>
                                            <a class="dropdown-item" href="#"><i class="fa fa-file-excel"></i> Excel</a>
                                        </div>
                                    </div>
                                </div>
                                <div class="col">
                                    <div class="dropdown">
                                        <button class="btn btn-primary dropdown-toggle" type="button"
                                                id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true"
                                                aria-expanded="false">
                                            使用 Flaticon Icons 图标
                                        </button>
                                        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                                            <a class="dropdown-item" href="#"><i class="flaticon-twitter-logo"></i> Twitter</a>
                                            <a class="dropdown-item" href="#"><i class="flaticon-facebook-letter-logo"></i> Facebook</a>
                                            <a class="dropdown-item" href="#"><i class="flaticon-letter-g"></i> Google</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!--end::Section-->
                    <div class="e-separator e-separator--space-lg e-separator--border-dashed"></div>

                    <!--begin::Section-->
                    <div class="e-section">
                        <span class="e-section-info">使用状态色</span>
                        <div class="e-section-content">
                            <div class="btn-group">
                                <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown"
                                        aria-haspopup="true" aria-expanded="false">Success
                                </button>
                                <div class="dropdown-menu">
                                    <a class="dropdown-item" href="#">选项一</a>
                                    <a class="dropdown-item" href="#">选项二</a>
                                    <a class="dropdown-item" href="#">选项三</a>
                                </div>
                            </div> <!-- /btn-group -->
                            <div class="btn-group">
                                <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"
                                        aria-haspopup="true" aria-expanded="false">Info
                                </button>
                                <div class="dropdown-menu">
                                    <a class="dropdown-item" href="#">选项一</a>
                                    <a class="dropdown-item" href="#">选项二</a>
                                    <a class="dropdown-item" href="#">选项三</a>
                                </div>
                            </div> <!-- /btn-group -->
                            <div class="btn-group">
                                <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown"
                                        aria-haspopup="true" aria-expanded="false">Warning
                                </button>
                                <div class="dropdown-menu">
                                    <a class="dropdown-item" href="#">选项一</a>
                                    <a class="dropdown-item" href="#">选项二</a>
                                    <a class="dropdown-item" href="#">选项三</a>
                                </div>
                            </div> <!-- /btn-group -->
                            <div class="btn-group">
                                <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown"
                                        aria-haspopup="true" aria-expanded="false">Danger
                                </button>
                                <div class="dropdown-menu">
                                    <a class="dropdown-item" href="#">选项一</a>
                                    <a class="dropdown-item" href="#">选项二</a>
                                    <a class="dropdown-item" href="#">选项三</a>
                                </div>
                            </div> <!-- /btn-group -->
                            <div class="btn-group">
                                <button type="button" class="btn btn-brand dropdown-toggle" data-toggle="dropdown"
                                        aria-haspopup="true" aria-expanded="false"> Brand
                                </button>
                                <div class="dropdown-menu">
                                    <a class="dropdown-item" href="#">选项一</a>
                                    <a class="dropdown-item" href="#">选项二</a>
                                    <a class="dropdown-item" href="#">选项三</a>
                                </div>
                            </div> <!-- /btn-group -->
                        </div>
                    </div>

                    <!--end::Section-->
                    <div class="e-separator e-separator--space-lg e-separator--border-dashed"></div>

                    <!--begin::Section-->
                    <div class="e-section">
                        <span class="e-section-info">你可以添加<code>button.dropdown-toggle-split</code>实现按钮分隔</span>
                        <div class="e-section-content">
                            <div class="btn-group">
                                <button type="button" class="btn btn-success">Success</button>
                                <button type="button" class="btn btn-success dropdown-toggle dropdown-toggle-split"
                                        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                    <span class="sr-only">Toggle Dropdown</span>
                                </button>
                                <div class="dropdown-menu">
                                    <a class="dropdown-item" href="#">选项一</a>
                                    <a class="dropdown-item" href="#">选项二</a>
                                    <a class="dropdown-item" href="#">选项三</a>
                                    <div class="dropdown-divider"></div>
                                    <a class="dropdown-item" href="#">选项四</a>
                                </div>
                            </div>
                            <div class="btn-group">
                                <button type="button" class="btn btn-info">Info</button>
                                <button type="button" class="btn btn-info dropdown-toggle dropdown-toggle-split"
                                        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                    <span class="sr-only">Toggle Dropdown</span>
                                </button>
                                <div class="dropdown-menu">
                                    <a class="dropdown-item" href="#">选项一</a>
                                    <a class="dropdown-item" href="#">选项二</a>
                                    <a class="dropdown-item" href="#">选项三</a>
                                    <div class="dropdown-divider"></div>
                                    <a class="dropdown-item" href="#">选项四</a>
                                </div>
                            </div>
                            <div class="btn-group">
                                <button type="button" class="btn btn-warning">Warning</button>
                                <button type="button" class="btn btn-warning dropdown-toggle dropdown-toggle-split"
                                        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                    <span class="sr-only">Toggle Dropdown</span>
                                </button>
                                <div class="dropdown-menu">
                                    <a class="dropdown-item" href="#">选项一</a>
                                    <a class="dropdown-item" href="#">选项二</a>
                                    <a class="dropdown-item" href="#">选项三</a>
                                    <div class="dropdown-divider"></div>
                                    <a class="dropdown-item" href="#">选项四</a>
                                </div>
                            </div>
                            <div class="btn-group">
                                <button type="button" class="btn btn-danger">Danger</button>
                                <button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split"
                                        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                    <span class="sr-only">Toggle Dropdown</span>
                                </button>
                                <div class="dropdown-menu">
                                    <a class="dropdown-item" href="#">选项一</a>
                                    <a class="dropdown-item" href="#">选项二</a>
                                    <a class="dropdown-item" href="#">选项三</a>
                                    <div class="dropdown-divider"></div>
                                    <a class="dropdown-item" href="#">选项四</a>
                                </div>
                            </div>
                            <div class="btn-group">
                                <button type="button" class="btn btn-brand">Secondary</button>
                                <button type="button" class="btn btn-brand dropdown-toggle dropdown-toggle-split"
                                        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                    <span class="sr-only">Toggle Dropdown</span>
                                </button>
                                <div class="dropdown-menu">
                                    <a class="dropdown-item" href="#">选项一</a>
                                    <a class="dropdown-item" href="#">选项二</a>
                                    <a class="dropdown-item" href="#">选项三</a>
                                    <div class="dropdown-divider"></div>
                                    <a class="dropdown-item" href="#">选项四</a>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!--end::Section-->
                    <div class="e-separator e-separator--space-lg e-separator--border-dashed"></div>

                    <!--begin::Section-->
                    <div class="e-section">
                        <span class="e-section-info">只有图标的下拉</span>
                        <div class="e-section-content">
                            <div class="dropdown dropdown-inline">
                                <button type="button"
                                        class="btn btn-hover-brand btn-elevate-hover btn-icon btn-sm btn-icon-md btn-circle"
                                        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                    <i class="flaticon-more-1"></i>
                                </button>
                                <div class="dropdown-menu dropdown-menu-right">
                                    <a class="dropdown-item" href="#">选项一</a>
                                    <a class="dropdown-item" href="#">选项二</a>
                                    <a class="dropdown-item" href="#">选项三</a>
                                    <div class="dropdown-divider"></div>
                                    <a class="dropdown-item" href="#">选项四</a>
                                </div>
                            </div>
                            &nbsp;&nbsp;&nbsp;
                            <div class="dropdown dropdown-inline">
                                <button type="button"
                                        class="btn btn-hover-danger btn-elevate-hover btn-icon btn-sm btn-icon-md"
                                        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                    <i class="flaticon-more-1"></i>
                                </button>
                                <div class="dropdown-menu dropdown-menu-right">
                                    <a class="dropdown-item" href="#">选项一</a>
                                    <a class="dropdown-item" href="#">选项二</a>
                                    <a class="dropdown-item" href="#">选项三</a>
                                    <div class="dropdown-divider"></div>
                                    <a class="dropdown-item" href="#">选项四</a>
                                </div>
                            </div>
                            &nbsp;&nbsp;&nbsp;
                            <div class="dropdown dropdown-inline">
                                <button type="button"
                                        class="btn btn-hover-brand btn-elevate-hover btn-icon btn-sm btn-icon-md"
                                        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                    <i class="flaticon-more"></i>
                                </button>
                                <div class="dropdown-menu dropdown-menu-right">
                                    <a class="dropdown-item" href="#">选项一</a>
                                    <a class="dropdown-item" href="#">选项二</a>
                                    <a class="dropdown-item" href="#">选项三</a>
                                    <div class="dropdown-divider"></div>
                                    <a class="dropdown-item" href="#">选项四</a>
                                </div>
                            </div>
                            &nbsp;&nbsp;&nbsp;
                            <div class="dropdown dropdown-inline">
                                <button type="button" class="btn btn-default btn-icon btn-sm btn-icon-md"
                                        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                    <i class="flaticon-more"></i>
                                </button>
                                <div class="dropdown-menu dropdown-menu-right">
                                    <a class="dropdown-item" href="#">选项一</a>
                                    <a class="dropdown-item" href="#">选项二</a>
                                    <a class="dropdown-item" href="#">选项三</a>
                                    <div class="dropdown-divider"></div>
                                    <a class="dropdown-item" href="#">选项四</a>
                                </div>
                            </div>
                            &nbsp;&nbsp;&nbsp;
                            <div class="dropdown dropdown-inline">
                                <button type="button" class="btn btn-clean btn-icon btn-sm btn-icon-md"
                                        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                    <i class="flaticon-more"></i>
                                </button>
                                <div class="dropdown-menu dropdown-menu-right">
                                    <a class="dropdown-item" href="#">选项一</a>
                                    <a class="dropdown-item" href="#">选项二</a>
                                    <a class="dropdown-item" href="#">选项三</a>
                                    <div class="dropdown-divider"></div>
                                    <a class="dropdown-item" href="#">选项四</a>
                                </div>
                            </div>
                            &nbsp;&nbsp;&nbsp;
                            <div class="dropdown dropdown-inline">
                                <button type="button"
                                        class="btn btn-brand btn-elevate-hover btn-icon btn-sm btn-icon-md btn-circle"
                                        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                    <i class="flaticon-more-1"></i>
                                </button>
                                <div class="dropdown-menu dropdown-menu-right">
                                    <a class="dropdown-item" href="#">选项一</a>
                                    <a class="dropdown-item" href="#">选项二</a>
                                    <a class="dropdown-item" href="#">选项三</a>
                                    <div class="dropdown-divider"></div>
                                    <a class="dropdown-item" href="#">选项四</a>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!--end::Section-->
                </div>
            </div>

            <!--begin::Card-->
            <div class="card">
                <div class="card-head">
                    <div class="card-head-label">
                        <h3 class="card-head-title">
                            箭头方向
                        </h3>
                    </div>
                </div>
                <div class="card-body">

                    <!--begin::Section-->
                    <div class="e-section">
                        <span class="e-section-info">
                            你可以使用<code>.dropup</code> <code>.dropleft</code> <code>.dropright</code> 设置不同方向的下拉
                        </span>
                        <div class="e-section-content">
                            <div class="row">
                                <div class="col">
                                    <div class="btn-group dropup">
                                        <button type="button" class="btn btn-brand dropdown-toggle"
                                                data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                            向上
                                        </button>
                                        <div class="dropdown-menu">
                                            <a class="dropdown-item" href="#">选项一</a>
                                            <a class="dropdown-item" href="#">选项二</a>
                                            <a class="dropdown-item" href="#">选项三</a>
                                            <div class="dropdown-divider"></div>
                                            <a class="dropdown-item" href="#">选项四</a>
                                        </div>
                                    </div>
                                </div>
                                <div class="col">
                                    <div class="btn-group dropleft">
                                        <button type="button" class="btn btn-brand dropdown-toggle"
                                                data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                            向左
                                        </button>
                                        <div class="dropdown-menu">
                                            <a class="dropdown-item" href="#">选项一</a>
                                            <a class="dropdown-item" href="#">选项二</a>
                                            <a class="dropdown-item" href="#">选项三</a>
                                            <div class="dropdown-divider"></div>
                                            <a class="dropdown-item" href="#">选项四</a>
                                        </div>
                                    </div>
                                </div>
                                <div class="col">
                                    <div class="btn-group dropright">
                                        <button type="button" class="btn btn-brand dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                            向右
                                        </button>
                                        <div class="dropdown-menu">
                                            <a class="dropdown-item" href="#">选项一</a>
                                            <a class="dropdown-item" href="#">选项二</a>
                                            <a class="dropdown-item" href="#">选项三</a>
                                            <div class="dropdown-divider"></div>
                                            <a class="dropdown-item" href="#">选项四</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!--end::Section-->
                </div>
            </div>

            <!--end::Card-->


        </div>
        <div class="col-md-6">
            <!--begin::Card-->
            <div class="card">
                <div class="card-head">
                    <div class="card-head-label">
                    <span class="card-head-icon e-hidden">
                        <i class="la la-gear"></i>
                    </span>
                        <h3 class="card-head-title">
                            尺寸
                        </h3>
                    </div>
                </div>
                <div class="card-body">

                    <!--begin::Section-->
                    <div class="e-section">
                    <span class="e-section-info">
                        你可以使用<code>.btn-lg</code> <code>.btn-sm</code> 设置按钮尺寸
                    </span>
                        <div class="e-section-content">
                            <div class="btn-group">
                                <button class="btn btn-brand btn-lg dropdown-toggle" type="button"
                                        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                    大按钮
                                </button>
                                <div class="dropdown-menu">
                                    <a class="dropdown-item" href="#">选项一</a>
                                    <a class="dropdown-item" href="#">选项二</a>
                                    <a class="dropdown-item" href="#">选项三</a>
                                    <div class="dropdown-divider"></div>
                                    <a class="dropdown-item" href="#">选项四</a>
                                </div>
                            </div>
                            <div class="btn-group">
                                <button type="button" class="btn btn-lg btn-brand">大按钮&分隔</button>
                                <button type="button"
                                        class="btn btn-lg btn-brand dropdown-toggle dropdown-toggle-split"
                                        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                    <span class="sr-only">Toggle Dropdown</span>
                                </button>
                                <div class="dropdown-menu">
                                    <a class="dropdown-item" href="#">选项一</a>
                                    <a class="dropdown-item" href="#">选项二</a>
                                    <a class="dropdown-item" href="#">选项三</a>
                                    <div class="dropdown-divider"></div>
                                    <a class="dropdown-item" href="#">选项四</a>
                                </div>
                            </div>
                            <div class="e-separator e-separator--space-lg e-separator--border-dashed"></div>
                            <div class="btn-group">
                                <button class="btn btn-brand btn-sm dropdown-toggle" type="button"
                                        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                    小按钮
                                </button>
                                <div class="dropdown-menu">
                                    <a class="dropdown-item" href="#">选项一</a>
                                    <a class="dropdown-item" href="#">选项二</a>
                                    <a class="dropdown-item" href="#">选项三</a>
                                    <div class="dropdown-divider"></div>
                                    <a class="dropdown-item" href="#">选项四</a>
                                </div>
                            </div>
                            <div class="btn-group">
                                <button type="button" class="btn btn-sm btn-brand">小按钮&分隔</button>
                                <button type="button" class="btn btn-sm btn-brand dropdown-toggle dropdown-toggle-split"
                                        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                    <span class="sr-only">Toggle Dropdown</span>
                                </button>
                                <div class="dropdown-menu">
                                    <a class="dropdown-item" href="#">选项一</a>
                                    <a class="dropdown-item" href="#">选项二</a>
                                    <a class="dropdown-item" href="#">选项三</a>
                                    <div class="dropdown-divider"></div>
                                    <a class="dropdown-item" href="#">选项四</a>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!--end::Section-->
                </div>
            </div>

            <!--end::Card-->

            <!--begin::Card-->
            <div class="card">
                <div class="card-head">
                    <div class="card-head-label">
                        <h3 class="card-head-title">
                            下拉选项
                        </h3>
                    </div>
                </div>
                <div class="card-body">

                    <!--begin::Section-->
                    <div class="e-section">
                        <span class="e-section-info">
                            你可以在<code>div.dropdown-menu</code>上添加<code>.dropdown-menu-left</code> <code>.dropdown-menu-right</code> 设置下拉选项对齐方式
                        </span>
                        <div class="e-section-content">
                            <div class="btn-group">
                                <button type="button" class="btn btn-brand dropdown-toggle"
                                        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                    左对齐
                                </button>
                                <div class="dropdown-menu dropdown-menu-left">
                                    <a class="dropdown-item" href="#">选项一</a>
                                    <a class="dropdown-item" href="#">选项二</a>
                                    <a class="dropdown-item" href="#">选项三</a>
                                    <div class="dropdown-divider"></div>
                                    <a class="dropdown-item" href="#">选项四</a>
                                </div>
                            </div>
                            <div class="btn-group">
                                <button type="button" class="btn btn-brand dropdown-toggle"
                                        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                    右对齐
                                </button>
                                <div class="dropdown-menu dropdown-menu-right">
                                    <a class="dropdown-item" href="#">选项一</a>
                                    <a class="dropdown-item" href="#">选项二</a>
                                    <a class="dropdown-item" href="#">选项三</a>
                                    <div class="dropdown-divider"></div>
                                    <a class="dropdown-item" href="#">选项四</a>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!--end::Section-->
                    <div class="e-separator e-separator--space-lg e-separator--border-dashed"></div>

                    <!--begin::Section-->
                    <div class="e-section">
                        <span class="e-section-info">你可以使用<code>.dropdown-header</code>添加头部说明</span>
                        <div class="e-section-content">
                            <div class="row">
                                <div class="col">
                                    <div class="btn-group">
                                        <button type="button" class="btn btn-brand dropdown-toggle"
                                                data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                            下拉按钮
                                        </button>
                                        <div class="dropdown-menu">
                                            <h6 class="dropdown-header">标题</h6>
                                            <a class="dropdown-item" href="#">选项一</a>
                                            <a class="dropdown-item" href="#">选项二</a>
                                            <a class="dropdown-item" href="#">选项三</a>
                                            <div class="dropdown-divider"></div>
                                            <a class="dropdown-item" href="#">选项四</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!--end::Section-->
                    <div class="e-separator e-separator--space-lg e-separator--border-dashed"></div>

                    <!--begin::Section-->
                    <div class="e-section">
                        <span class="e-section-info">你可以使用<code>div.dropdown-divider</code>添加分割线</span>
                        <div class="e-section-content">
                            <div class="row">
                                <div class="col">
                                    <div class="btn-group">
                                        <button type="button" class="btn btn-brand dropdown-toggle"
                                                data-toggle="dropdown"
                                                aria-haspopup="true" aria-expanded="false">
                                            下拉按钮
                                        </button>
                                        <div class="dropdown-menu">
                                            <a class="dropdown-item" href="#">选项一</a>
                                            <a class="dropdown-item" href="#">选项二</a>
                                            <a class="dropdown-item" href="#">选项三</a>
                                            <div class="dropdown-divider"></div>
                                            <a class="dropdown-item" href="#">选项四</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!--end::Section-->
                    <div class="e-separator e-separator--space-lg e-separator--border-dashed"></div>

                    <!--begin::Section-->
                    <div class="e-section">
                        <span class="e-section-info">你可以使用 <code>.active</code>、<code>.disabled</code> 将选项默认选中、禁用</span>
                        <div class="e-section-content">
                            <div class="row">
                                <div class="col">
                                    <div class="btn-group">
                                        <button type="button" class="btn btn-brand dropdown-toggle"
                                                data-toggle="dropdown"
                                                aria-haspopup="true" aria-expanded="false">
                                            下拉按钮
                                        </button>
                                        <div class="dropdown-menu">
                                            <a class="dropdown-item active" href="#">选项一</a>
                                            <a class="dropdown-item disabled" href="#">选项二</a>
                                            <a class="dropdown-item" href="#">选项三</a>
                                            <div class="dropdown-divider"></div>
                                            <a class="dropdown-item" href="#">选项四</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!--end::Section-->
                </div>
            </div>

            <!--end::Card-->
        </div>
    </div>
</div>
<!--str:: 全局js -->
<script src="/assets/plugins/global/plugins.bundle.js"></script>
<script src="/assets/js/demo1/scripts.bundle.js"></script>
<!--end:: 全局js -->
</body>
</html>